import React, { useState } from "react";
import "./index.less";
import { useNavigate } from "react-router-dom";
import { Checkbox } from "antd-mobile";
import { BackgroundButton } from "../../components/button";
import priBtn from "@/assets/images/priBtn.png";

// 首页
function Home() {
  const navigate = useNavigate();
  const [agreed, setAgreed] = useState(false);
  const handleApply = () => {
    navigate("/auth");
  };

  return (
    <div className="home-page">
      <div className="bottom-section">
        <BackgroundButton
          className={"apply-button"}
          type="primary"
          onClick={handleApply}
          backgroundImage={priBtn}
          disabled={!agreed}
        >
          0元申码
        </BackgroundButton>
        <div className="agreement-section">
          <Checkbox
            checked={agreed}
            onChange={setAgreed}
            className="agreement-checkbox"
          />
          <span className="agreement-text">
            我已阅读并确认
            <span className="terms-link" onClick={() => navigate("/protocol")}>
              《用户消保条款》
            </span>
          </span>
        </div>
      </div>
    </div>
  );
}

export default Home;
